import React , { useState , useRef , memo , useContext } from 'react';
import { useAppContext , ADD_TODOLIST_ITEM } from './Context';

const Input = () => {
    const [value,setValue] = useState('');

    const {state,dispatch} = useAppContext();

    const add = () => {
        dispatch({type:ADD_TODOLIST_ITEM,title:value})
    }

    // const [state,setState] = useState({val:"",list:[],a:100});
    // setState({...state,list:[1]});//在更新时要把全部的状态的对应的值都传进去，否则的话后面更新的值会直接覆盖前面所有状态

    return <div>
        <input value={value} onChange={(e) => setValue(e.target.value)} type="text"/>
        <button onClick={add}>添加</button>
    </div>
}

export default memo(Input);


//非受控组件形式
//获取真实的dom节点
// const inputEle = useRef();
// const add = () => {
//     console.log(inputEle);
// }
// return <div>
//     <Header />
//     <input ref={inputEle} type="text"/>
//     <button onClick={add}>添加</button>
// </div>